<template>
  <div class="crosses_successful" :id="id">
  </div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "CrossesSuccessful",
    props:{
      crossSuccess:{
        type: Number
      },
    },
    data(){
      return {
        id:Math.random().toString(36).substr(2)
      }
    },
    mounted() {
      const data = [{"ac":0,"number":205},{"ac":0.01,"number":98},{"ac":0.02,"number":66},{"ac":0.03,"number":21},{"ac":0.04,"number":13},{"ac":0.05,"number":9},{"ac":0.06,"number":7},{"ac":0.07,"number":2},{"ac":0.08,"number":4},{"ac":0.09,"number":9},{"ac":0.11,"number":1},{"ac":0.12,"number":2},{"ac":0.13,"number":1},{"ac":0.15,"number":2},{"ac":0.16,"number":4},{"ac":0.23,"number":4},{"ac":0.25,"number":1},{"ac":0.29,"number":2},{"ac":0.31,"number":1},{"ac":0.42,"number":1},{"ac":0.52,"number":2},{"ac":0.58,"number":1},{"ac":0.59,"number":1},{"ac":0.68,"number":1},{"ac":1.05,"number":1},{"ac":1.29,"number":1},{"ac":3,"number":1},{"ac":6.92,"number":1},{"ac":18,"number":1},{"ac":45,"number":1}]
      const current_player_crossSuccess = this.crossSuccess;
      const column = new Column(this.id, {
        data,
        width: 200,
        height: 150,
        meta:{
          ac: {
            alias:'传中成功',
            formatter:(v)=>{
              return v + '次'
            }
          },
          number: {
            alias:'球员人数',
            formatter:(v)=>{
              return v + '人'
            }
          },
        },
        xField: 'ac',
        yField: 'number',
        xAxis: {
          label: {
            formatter:(ac)=>{
              if(ac === '45次') {
                // return ac.slice(0,ac.length-1)
                return '45次'
              }
              return null
            },
            autoHide:false,
            autoRotate: false,
            // position:'left'
          },
          tickLine:null,
          title:null,
          line:null,
          subTickLine:null,
          grid:null,
        },
        yAxis:{
          label:{
            formatter:(number)=>{
              return parseFloat(number)
            },
          },
          title:null,
        },
        // maxColumnWidth: 20,
        title: {
          visible: true,
          text: '传球总数/90',
          style:{
            fontSize: 14,
            fill: 'red',
          }
        },
        // colorField: 'ac',
        // 如果需要特殊对某个值设置颜色就不能够设置colorField
        color:({ac})=>{
          if(ac === current_player_crossSuccess){
            return '#29a5da';
          }
          return '#DCF1FA';
        },
        columnStyle:{

        },
        minColumnWidth: 2,
        maxColumnWidth:50,
        // columnSize:15,
        columnWidthRatio:1,
        legend:{
          visible: false
        },
        tooltip:{
          fields:['ac','number',],
          domStyles:{
            'g2-tooltip':{
              width: '150px',
              height:'60px'
            },
            'g2-tooltip-title':{
              display:'none'
            },
            'g2-tooltip-list-item':{
              width:'150px',
              // height:'30px',
              display: 'flex',
              justifyContent:'flexStart'
            },
            'g2-tooltip-marker':{
              marginTop:'3px'
            }
          },
        },
      });
      column.render();
    }
  }
</script>

<style scoped>
  .crosses_successful {
    margin-top: -1px;
    width: 240px;
    height: 180px;
  }
</style>


